'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    Modal
} from 'react-native';

var {Loading, EasyLoading} = require('react-native-easy-loading');

import Color from '../../../../core/constant/color';
import InitDB from '../../../../core/database/init-db';
import ModalDropdown from '../../../../core/component/comp.modal-dropdown';
import {NavigationActions} from 'react-navigation'

let winWidth = Dimensions.get('window').width;//屏幕宽度
let winHeight = Dimensions.get('window').height;//屏幕高度

class AccountSafeScene extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            modalVisible: '0',
            mobile: '',
        }
    }

    componentDidMount() {
        const username = InitDB.getUserInfo('QST_CODE="username"')[0].OPT_VAL;
        this.setState({
            username: username
        })
    }


    onPressExitSelect = (value) => {
        this.setState({modalVisible: '0'});
        if (value === '退出登陆') {
            Promise.resolve().then(EasyLoading.show('正在退出..', 3000))
            InitDB.logout();
            Promise.resolve().then(EasyLoading.dismis());

            const resetAction = NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({routeName: 'Login'})
                ]
            })
            this.props.navigation.dispatch(resetAction)
        }

    }


    render() {
        return (




            <ScrollView style={styles.body}>


                <Loading/>

                <TouchableWithoutFeedback
                    onPress={() => {
                        this.setState({modalVisible: '0'});
                    }}>
                    <View>
                        <TouchableHighlight
                            style={{
                                padding: 5,
                                marginTop: 10,
                                borderTopWidth: 1,
                                alignItems: "center",
                                flexDirection: "row",
                                backgroundColor: '#ffffff',
                                justifyContent: "flex-start",
                                borderColor: PageColor.borderColor
                            }}
                            onPress={() => {
                                this.props.navigation.navigate('UpdateMobile');
                            }}>
                            <View style={{flexDirection: "row", alignItems: "center"}}>
                                <View style={{flex: 1}}>
                                    <Text>手机号</Text>
                                </View>
                                <View style={{
                                    flex: 3,
                                    flexDirection: "row",
                                    justifyContent: "flex-end",
                                    alignItems: "center"
                                }}>
                                    <Text style={{color: Color.TEXT_GREY, fontSize: 12}}>{this.state.username}</Text>
                                    <Image source={require('../../../../img/arrows.png')}/>
                                </View>
                            </View>
                        </TouchableHighlight>

                        <TouchableHighlight
                            style={{
                                flexDirection: "row",
                                justifyContent: "flex-start",
                                alignItems: "center",
                                borderColor: PageColor.borderColor,
                                borderTopWidth: 1,
                                backgroundColor: '#ffffff',
                                marginTop: 0,
                                padding: 5
                            }}
                            onPress={() => {
                                this.props.navigation.navigate('ResetPwd');
                            }}>
                            <View style={{flexDirection: "row", alignItems: "center"}}>
                                <View style={{flex: 1}}>
                                    <Text>密码修改</Text>
                                </View>
                                <View style={{
                                    flex: 3,
                                    flexDirection: "row",
                                    justifyContent: "flex-end",
                                    alignItems: "center"
                                }}>
                                    <Text style={{color: Color.TEXT_GREY, fontSize: 12}}>已设置</Text>
                                    <Image source={require('shequnsiweiapp/src/img/arrows.png')}/>
                                </View>
                            </View>
                        </TouchableHighlight>
                        <ModalDropdown modalVisible={this.state.modalVisible} data={['退出登陆']}
                                       clickEvent={this.onPressExitSelect}
                        />
                    </View>
                </TouchableWithoutFeedback>
            </ScrollView>
        )
    }

}


class VideoSpzt extends React.Component {

    render() {
        let spzt = this.props.spzt;
        if (spzt && spzt != '1') {

            let spztDesc;
            if (spzt === '0') {
                spztDesc = '视频认证审批中';
            } else if (spzt === '2') {
                spztDesc = '视频认证未通过';
            }

            return (
                <View style={[this.props.styles, {backgroundColor: '#393130'}]}>
                    <Text>{spztDesc}</Text>
                </View>
            );

        } else {
            return null;
        }
    }

}


const PageColor = {
    textLabel: 'rgb(143,143,143)',
    borderColor: 'rgb(230,230,230)',
}


const styles = StyleSheet.create({
    body: {
        backgroundColor: Color.VIEW_BG_COLOR,
        height: winHeight,
        flex: 1,
    },
    topBg: {
        marginLeft: 2,
        marginRight: 2,
        height: winWidth / 5 * 3,
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 2,
        borderColor: '#DDD',
        borderWidth: 2,
    },

    loginText: {
        fontSize: 18,
        color: '#FFF',
        position: 'absolute',
        top: 10,
    },
    headImg_out: {
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        borderWidth: 0,
        borderColor: '#dd2c2c',
        marginLeft: 2,
        marginRight: 2,
    },
    headImg: {
        height: 100,
        width: 100,
        borderRadius: 50,
    },
    yanzhengma_viewOut: {
        height: 40,
        flexDirection: 'row',
        justifyContent: 'flex-start',
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10,
    },
    yanzhengma_inputbox: {

        flex: 2,
        marginLeft: 0,
        marginRight: 10,
        marginTop: 0,
        marginBottom: 0,
        borderColor: '#DDD',
        borderRadius: 8,
        borderWidth: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    inputBox: {
        flexDirection: 'row',
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10,
        borderColor: '#DDD',
        borderRadius: 8,
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 40
    },
    xiayibu_view: {
        flexDirection: 'row',
        marginLeft: 5,
        marginRight: 5,
        marginTop: 5,
        borderColor: '#DDD',
        borderRadius: 15,
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        height: 40,
        backgroundColor: '#0404F2',
    },
    loginHref_view: {
        flexDirection: 'row',
        marginLeft: 80,
        marginRight: 80,
        marginTop: 5,
        justifyContent: 'center',
    },
    icon: {
        height: 15,
        width: 15,
        marginLeft: 10,
        marginRight: 10,
    },
    inputText: {
        flex: 1,
        marginRight: 10,
    },
    inputTextYanzhengma: {
        flex: 3,
        marginRight: 3,

    },
    addIdPicBox: {
        marginLeft: 40,
        marginRight: 40,
        marginTop: 10,
    },
    addIdPic: {
        height: 80,
        width: 80,
        marginLeft: 12,
        marginTop: 6,
    },
    loginBtn: {
        height: 40,
        borderRadius: 8,
        backgroundColor: '#00F',
        marginRight: 40,
        marginLeft: 40,
        marginTop: 20,
        justifyContent: 'center',
        alignItems: 'center',
    },
    btnText: {
        fontSize: 15,
        color: '#FFF',
    },
    inputErrorView: {

        marginLeft: 60,
        marginTop: 1,
        marginBottom: 1,
    },
    inputErrorTxt: {
        color: '#DF4849'
    },
    sex: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        marginTop: 0,
        height: "100%",
        alignItems: "center",
        backgroundColor: "#E4E4E4",
    }

});

module.exports = AccountSafeScene;